import React, { useState, useEffect } from 'react';
import { Card, Row, Col } from 'antd';
import { Distribution, Features, StaffTurnover, EmployeeDistPie, EmployeeFeatureBar } from './components';
import { fetchEmployeeConstructView } from '../service';
import styles from './style.less';

// 员工结构组件
const Structure = ({ companyId }) => {
    const [loading, setLoading] = useState(true);
    const [constructData, setConstructData] = useState({});
    const [distributionData, setDistributionData] = useState([]); // 员工分布数据
    const [distributionType, setDistributionType] = useState(null); // 员工分布数据类型

    const [featuresType, setFeaturesType] = useState(null); // 员工特征分析类型

    // 公司/部门和职位切换的回调
    const handleChangeDistribution = e => {
        if (e === '1') {
            setDistributionData(constructData.departmentList);
        } else {
            setDistributionData(constructData.postList);
        }
        setDistributionType(e);
    };

    // 员工特征分析切换回调
    const handleChangeFeatures = e => {
        setFeaturesType(e);
    };

    // 拉取数据
    const featchData = async () => {
        setLoading(true);
        const { data: resData, code } = (await fetchEmployeeConstructView({ companyId })) || {};
        if (code === 10000) {
            setConstructData(resData); // 整个栏目数据
            setDistributionData(resData.departmentList); // 人员分布默认读取公司职位
        }
        setLoading(false);
    };

    useEffect(() => {
        featchData();
        setFeaturesType(null);
        setDistributionType(null);
    }, [companyId]);

    return (
        <Card
            title="员工结构"
            style={{ marginTop: 12 }}
            className={styles.structure}
            bordered={false}
            loading={loading}
        >
            <Row gutter={16}>
                <Col lg={{ span: 24 }} xl={{ span: 16 }}>
                    {/* 人员分布 */}
                    <Row>
                        <Col span={14}>
                            <div className={styles.tbar}>人员分布</div>
                            <div style={{ height: 240, width: 350 }}>
                                <EmployeeDistPie data={distributionData} type={distributionType} />
                            </div>
                        </Col>
                        <Col span={10}>
                            <Distribution
                                data={distributionData}
                                type={distributionType}
                                onChange={handleChangeDistribution}
                            />
                        </Col>
                    </Row>

                    {/* 员工特征分析 */}
                    <Row style={{ marginTop: 30 }}>
                        <Col span={14}>
                            <div className={styles.tbar}>员工特征分析</div>
                            <div style={{ height: 280, marginTop: 20 }}>
                                <EmployeeFeatureBar data={constructData.characterList} featuresType={featuresType} />
                            </div>
                        </Col>
                        <Col span={9} offset={1}>
                            <Features
                                featuresType={featuresType}
                                hrCompanyVO={constructData.hrCompanyVO}
                                onChange={handleChangeFeatures}
                                data={constructData.characterList}
                            />
                        </Col>
                    </Row>
                </Col>
                <Col lg={{ span: 24, offset: 0 }} xl={{ span: 6, offset: 2 }}>
                    {/* 人员流动 */}
                    <div className={styles.tbar}>人员流动</div>
                    <StaffTurnover data={constructData.hrCompanyVO} leaveData={constructData.hrEmployeeLeaveReason} />
                </Col>
            </Row>
        </Card>
    );
};

export default Structure;
